<!DOCTYPE html>
<html>
<head>
    <title>Stark Effect Energy Levels</title>
</head>
<body>
    <canvas id="physicsCanvas" width="500" height="450"></canvas>
    <script>
        const canvas = document.getElementById('physicsCanvas');
        const ctx = canvas.getContext('2d');

        // Clear canvas
        ctx.fillStyle = 'white';
        ctx.fillRect(0, 0, canvas.width, canvas.height);

        // --- Style and Constants ---
        const x_axis_start = 120;
        const y_axis_base = 350;
        const y_axis_top = 100;
        const x_axis_end = 450;

        const y_level_low = 300;
        const y_level_high = 180;

        const line_width = 3;
        const main_font_size = 30;
        const sub_font_size = 22;
        const font_family = 'Arial';
        const caption_font_family = 'Times New Roman';

        ctx.strokeStyle = 'black';
        ctx.fillStyle = 'black';
        ctx.lineWidth = line_width;

        // --- Draw Axes ---
        // Vertical Axis
        ctx.beginPath();
        ctx.moveTo(x_axis_start, y_axis_base);
        ctx.lineTo(x_axis_start, y_axis_top);
        ctx.stroke();
        // Horizontal Axis
        ctx.beginPath();
        ctx.moveTo(x_axis_start, y_axis_base);
        ctx.lineTo(x_axis_end, y_axis_base);
        ctx.stroke();

        // --- Draw Tick Marks ---
        ctx.beginPath();
        ctx.moveTo(x_axis_start - 5, y_level_low);
        ctx.lineTo(x_axis_start + 5, y_level_low);
        ctx.stroke();

        ctx.beginPath();
        ctx.moveTo(x_axis_start - 5, y_level_high);
        ctx.lineTo(x_axis_start + 5, y_level_high);
        ctx.stroke();

        // --- Draw Energy Level Lines ---
        // S_1/2 line
        ctx.beginPath();
        ctx.moveTo(160, y_level_low);
        ctx.lineTo(260, y_level_low);
        ctx.stroke();

        // P_1/2 line
        ctx.beginPath();
        ctx.moveTo(300, y_level_low);
        ctx.lineTo(400, y_level_low);
        ctx.stroke();

        // P_3/2 line
        ctx.beginPath();
        ctx.moveTo(300, y_level_high);
        ctx.lineTo(400, y_level_high);
        ctx.stroke();

        // --- Draw Labels ---
        ctx.textBaseline = 'middle';

        // Axis Labels
        ctx.textAlign = 'right';
        // Label for ε₀
        ctx.font = `${main_font_size}px ${font_family}`;
        ctx.fillText('ε', x_axis_start - 35, y_level_low);
        ctx.font = `${sub_font_size}px ${font_family}`;
        ctx.fillText('0', x_axis_start - 20, y_level_low + 8);

        // Label for ε₀ · Δ
        ctx.font = `${main_font_size}px ${font_family}`;
        ctx.fillText('ε', x_axis_start - 65, y_level_high);
        ctx.font = `${sub_font_size}px ${font_family}`;
        ctx.fillText('0', x_axis_start - 50, y_level_high + 8);
        
        // The dot symbol '·'
        ctx.beginPath();
        ctx.arc(x_axis_start - 37, y_level_high, 2.5, 0, 2 * Math.PI);
        ctx.fill();
        
        // The Delta symbol 'Δ'
        ctx.font = `${main_font_size}px ${font_family}`;
        ctx.fillText('Δ', x_axis_start - 18, y_level_high);


        // State Labels
        ctx.textAlign = 'left';
        // Label S₁/₂
        ctx.font = `${main_font_size}px ${font_family}`;
        ctx.fillText('S', 265, y_level_low);
        ctx.font = `${sub_font_size}px ${font_family}`;
        ctx.fillText('1/2', 285, y_level_low + 8);

        // Label P₁/₂
        ctx.font = `${main_font_size}px ${font_family}`;
        ctx.fillText('P', 405, y_level_low);
        ctx.font = `${sub_font_size}px ${font_family}`;
        ctx.fillText('1/2', 425, y_level_low + 8);

        // Label P₃/₂
        ctx.font = `${main_font_size}px ${font_family}`;
        ctx.fillText('P', 405, y_level_high);
        ctx.font = `${sub_font_size}px ${font_family}`;
        ctx.fillText('3/2', 425, y_level_high + 8);

        // --- Draw Figure Caption ---
        ctx.font = `bold ${main_font_size-6}px ${caption_font_family}`;
        ctx.textAlign = 'center';
        ctx.fillText('Fig. 5.14', (x_axis_start + x_axis_end) / 2, y_axis_base + 60);

    </script>
</body>
</html>